<template>
  <div class="container">
    <h1>图片上传</h1>
    <el-form ref="uploadForm" :model="fileInfo">
      <el-form-item label="选择图片">
        <input type="file" id="fileInput" @change="handleFileChange" />
      </el-form-item>
      <el-form-item>
        <button @click="submitUpload" type="primary">上传</button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    this.fileInfo = { fileName: '' };
  },
  methods: {
    handleFileChange(e) {
      console.info(e)
      console.info(e.target.files[0])
      const file = e.target.files[0];
      if (file) {
        this.fileInfo.fileName = file.name;
      }
    },
    submitUpload() {
      const formData = new FormData();
      formData.append('file', this.fileInfo.fileName);
      console.info(formData)
      console.info(this.fileInfo)
      alert(formData)
      // 调用后端API
      // fetch('/api/upload', {
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'multipart/form-data',
      //   },
      //   body: formData,
      // })
      //     .then(response => response.text())
      //     .then(data => {
      //       console.log('图片已上传成功:', data);
      //     })
      //     .catch(error => {
      //       console.error('上传失败:', error);
      //     });
    }
  }
}
</script>
